<template>
  <view class="home-page">
    <!-- 定位区域 -->
    <LocationBar 
      :location="currentLocation" 
      @select="selectLocation" 
    />

    <!-- 搜索框 -->
    <view class="search-container">
      <SearchBar 
        :placeholder="'搜索商家或美食'" 
        @selectMerchant="handleSelectMerchant"
        @selectProduct="handleSelectProduct"
      />
    </view>

    <!-- 通告栏 -->
    <NoticeBar :notices="notices" />

    <!-- 轮播图 -->
    <BannerSwiper 
      :banners="banners" 
      @click="handleBannerClick" 
    />

    <!-- 今日优选 -->
    <FoodSection 
      :foods="selectedFoods" 
      @select="goToFoodDetail"
      @more="goToMore('selected')"
    />

    <!-- 合作商家 -->
    <MerchantSection 
      :merchants="merchants" 
      @select="goToMerchantDetail"
      @more="goToMore('merchant')"
    />

    <!-- 愿望榜单 -->
    <WishBanner @click="goToWishList" />

    <!-- 优惠活动 -->
    <PromotionSection 
      :promotions="promotions" 
      @select="goToPromotion"
      @more="goToMore('promotion')"
    />
  </view>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useLocation } from './composables/useLocation';
import { useHomeData } from './composables/useHomeData';
import { useNavigation } from './composables/useNavigation';

// 导入组件
import SearchBar from '@/components/SearchBar.vue';
import LocationBar from './components/LocationBar.vue';
import NoticeBar from './components/NoticeBar.vue';
import BannerSwiper from './components/BannerSwiper.vue';
import FoodSection from './components/FoodSection.vue';
import MerchantSection from './components/MerchantSection.vue';
import WishBanner from './components/WishBanner.vue';
import PromotionSection from './components/PromotionSection.vue';

// 使用组合式函数
const { 
  currentLocation, 
  selectLocation, 
  loadSavedLocation 
} = useLocation();

const {
  notices,
  banners,
  selectedFoods,
  merchants,
  promotions,
  loadNearbyMerchants
} = useHomeData();

const {
  handleSelectMerchant,
  handleSelectProduct,
  handleBannerClick,
  goToFoodDetail,
  goToMerchantDetail,
  goToWishList,
  goToPromotion,
  goToMore
} = useNavigation();

// 页面加载
onMounted(() => {
  console.log('首页加载完成');
  
  // 先尝试从本地加载位置
  const hasLocation = loadSavedLocation();
  
  if (!hasLocation) {
    // 如果没有保存的位置，自动定位
    selectLocation();
  }
  
  // TODO: 加载附近商家（当有区域ID时）
  // loadNearbyMerchants(regionId);
});
</script>

<style scoped>
.home-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20rpx;
}

.search-container {
  padding: 20rpx 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}
</style>